<f:if condition="{configuration.insertAbove}">
    <f:render section="paginator" arguments="{pagination: pagination, recordsLabel: configuration.recordsLabel}" />
</f:if>

<f:if condition="{configuration.insertAbove} || {configuration.insertBelow}">
    <script>
        function goToPage(formObject) {
            var formField = formObject.elements['paginator-target-page'];
            var url = formField.dataset.url;
            var numberOfPages = parseInt(formField.dataset.numberOfPages);
            var page = parseInt(formField.value);
            if (page > numberOfPages) {
                page = numberOfPages;
            } else if (page < 1) {
                page = 1;
            }
            url = url.replace('987654321', page);
            self.location.href = url;
            return false;
        }
    </script>
</f:if>

<f:renderChildren arguments="{contentArguments}" />

<f:if condition="{configuration.insertBelow}">
    <f:render section="paginator" arguments="{pagination: pagination, recordsLabel: configuration.recordsLabel}" />
</f:if>

<f:section name="paginator">
    <nav class="pagination-wrap">
        <ul class="pagination pagination-block">
            <f:if condition="{pagination.hasLessPages}">
                <f:then>
                    <li>
                        <a href="{f:widget.uri(arguments:'{currentPage: 1}')}" title="{f:translate(key:'widget.pagination.first')}">
                            <core:icon identifier="actions-view-paging-first" />
                        </a>
                    </li>
                    <li>
                        <a href="{f:widget.uri(arguments:'{currentPage: pagination.previousPage}')}" title="{f:translate(key:'widget.pagination.previous')}">
                            <core:icon identifier="actions-view-paging-previous" />
                        </a>
                    </li>
                </f:then>
                <f:else>
                    <li class="disabled">
                        <span>
                            <core:icon identifier="actions-view-paging-first" />
                        </span>
                    </li>
                    <li class="disabled">
                        <span>
                            <core:icon identifier="actions-view-paging-previous" />
                        </span>
                    </li>
                </f:else>
            </f:if>
            <li>
                <span>
                    <f:if condition="{recordsLabel}">
                        <f:then>
                            {recordsLabel}
                        </f:then>
                        <f:else>
                            <f:translate key="widget.pagination.records" />
                        </f:else>
                    </f:if>
                    {pagination.startRecord} - {pagination.endRecord}
                </span>
            </li>
            <li>
                <span>
                    <f:translate key="widget.pagination.page" />

                    <form onsubmit="return goToPage(this);" style="display:inline;">
                        <f:form.textfield additionalAttributes="{min: '1', data-number-of-pages: '{pagination.numberOfPages}', data-url: '{f:widget.uri(arguments:\'{currentPage: 987654321}\')}'}" name="paginator-target-page" class="form-control input-sm paginator-input" size="5" value="{pagination.current}" type="number" />
                    </form>

                    / {pagination.numberOfPages}
                </span>
            </li>
            <f:if condition="{pagination.hasMorePages}">
                <f:then>
                    <li>
                        <a href="{f:widget.uri(arguments:'{currentPage: pagination.nextPage}')}" title="{f:translate(key:'widget.pagination.next')}">
                            <core:icon identifier="actions-view-paging-next" />
                        </a>
                    </li>
                    <li>
                        <a href="{f:widget.uri(arguments:'{currentPage: pagination.numberOfPages}')}" title="{f:translate(key:'widget.pagination.last')}">
                            <core:icon identifier="actions-view-paging-last" />
                        </a>
                    </li>
                </f:then>
                <f:else>
                    <li class="disabled">
                        <span>
                            <core:icon identifier="actions-view-paging-next" />
                        </span>
                    </li>
                    <li class="disabled">
                        <span>
                            <core:icon identifier="actions-view-paging-last" />
                        </span>
                    </li>
                </f:else>
            </f:if>
            <li>
                <a href="{f:widget.uri(arguments:'{currentPage: pagination.current}')}" title="{f:translate(key:'widget.pagination.refresh')}">
                    <core:icon identifier="actions-refresh" />
                </a>
            </li>
        </ul>
    </nav>
</f:section>
